<template>
  <div class="Association">
    <!-- Form -->
    <el-button class="relation" type="text" @click="openDialog()"><i class="el-icon-plus"></i>添加测点</el-button>

    <el-dialog title="添加测点" :visible.sync="dialogETLVisible">
      <el-form :inline="true" class="titleForm" :model="getOidList">
        <div class="demo-input-suffix">
          测点列表
          <el-input
            class="searchInput"
            placeholder="请输入内容"
            v-model="getOidList.data.condition.search">
            <i @click="searchOid" slot="suffix" class="thisOne el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </el-form>
      <el-table :data="allEquipData" stripe border fit highlight-current-row
                style="width: 100%;" height="541" :header-cell-style="{background:'#D8DEE8'}" @selection-change="ETLChangeFun">
        <el-table-column
          type="selection"
          width="35"
          @selection-change="ETLChangeFun">
        </el-table-column>
        <el-table-column
          prop="fittings_type_label"
          label="机构"
          width="150">
        </el-table-column>
        <el-table-column
          prop="oid"
          label="测点编号"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="测点名称"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="type_label"
          label="测点类型"
          width="164">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="clears" @click="dialogETLVisible = false">取 消</el-button>
        <el-button class="bottonConfirm" type="primary" @click="selectionETL()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    props: ['editETL', 'addETL', 'ETLOid'],
    data() {
      return {
        total: 0,
        templateRadio: [],
        allEquipData: [],
        options: [],
        dialogETLVisible: false,
        search: {
          pid: '',
          name: '',
          type: '',
          model: ''
        },
        currentPage4: 4,
        getOidList: {
          access_token: localStorage.getItem('access_token'),
          type: 'etl_oid_get_condition',
          data: {
            condition: {
              strategy_id: '',
              oid: '',
              oids: [],
              oid_filter: [],
              name: '',
              search: '',
              type: '',
              types: [],
              compute_cycle_filter: '',
              analog_type_filter: '',
              digit_type_filter: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        }
      }
    },
    methods: {
      openDialog() {
        this.dialogETLVisible = true
        this.getEquip()
      },
      searchOid() {
        this.getEquip()
      },
      getEquip() {
        console.log(this.ETLOid)
        if (this.addETL) {
          this.getOidList.data.condition.type = this.addETL.data.data_type
          this.getOidList.data.condition.oid_filter = []
          for (var o = 0; o < this.ETLOid.length; o++) {
            this.getOidList.data.condition.oid_filter.push(this.ETLOid[o].oid)
          }
          this.getOidList.data.condition.compute_cycle_filter = this.addETL.data.compute_cycle
          this.getOidList.data.condition.analog_type_filter = this.addETL.data.analog_type
          this.getOidList.data.condition.digit_type_filter = this.addETL.data.digit_type
        }
        if (this.editETL) {
          this.getOidList.data.condition.type = this.editETL.data.data_type
          this.getOidList.data.condition.oid_filter = []
          if (this.editETL.data.oid_array) {
            for (var i = 0; i < this.editETL.data.oid_array.length; i++) {
              this.getOidList.data.condition.oid_filter.push(this.editETL.data.oid_array[i].oid)
            }
          }
          this.getOidList.data.condition.compute_cycle_filter = this.editETL.data.compute_cycle
          this.getOidList.data.condition.analog_type_filter = this.editETL.data.analog_type
          this.getOidList.data.condition.digit_type_filter = this.editETL.data.digit_type
        }
        axios.post('/etloid', this.getOidList, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.allEquipData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.getOidList.data.page.page_number = (val) + ''
        this.getEquip()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.getOidList.data.page.page_size = (pageSize) + ''
        this.getEquip()
      },
      ETLChangeFun(val) {
        this.templateRadio = val
      },
      selectionETL() {
        this.$emit('ETLneed', this.templateRadio)
        this.dialogETLVisible = false
      }
    }
  }
</script>
<style scoped="">
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .clears{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-left: 10px;
  }
  /deep/ .bottonQuery {
    margin-top: 6px;
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .bottonConfirm {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .equipSelect {
    width: 135px;
  }
  /deep/ .el-dialog {
    border-radius: 5px;
    width: 750px;
  }
  /deep/ .el-dialog__header {
    background: #E3E6EE;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px 9px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  /deep/ .el-dialog__headerbtn {
    top: 15px;
  }
  /deep/ .el-dialog__body {
    padding: 20px;
    height: 665px;
  }
  /deep/ .el-dialog__footer {
    height: 50px;
    border-top: 1px solid #DCDFE6;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border {
    height: 500px;
    margin: 0px!important;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    padding: 0px;
  }
  /deep/ .el-table th {
    padding: 4px 0px;
  }
  /deep/ .el-table td {
    padding: 13px 0px;
    font-weight: normal;
  }
  /deep/ .block {
    margin-top: 5px;
    height:15px;
  }
  /deep/ .el-pagination {
    float: right;
    padding: 8px 0px;
  }
  /deep/ .relation {
    float: right;
    height: 30px;
    font-size: 14px;
    padding: 6px 16px;
    color: #fff;
    background: #0072F3;
    border-color: #0072F3;
  }
  /deep/ .titleForm {
    height: 50px;
    padding: 10px 20px;
    background: #F0F3F5;
  }
  /deep/ .handInput {
    width: 365px;
    float: right;
  }
  /deep/ .search{
    position: absolute;
    cursor: pointer;
    color: #0072F3;
  }
  /deep/ .searchInput {
    width: 300px;
    float: right;
  }
  /deep/ .thisOne {
    line-height: 30px;
    cursor: pointer;
  }
  /deep/ .gutter {
    background: #D8DEE8;
  }
</style>
